<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>

<div id="app">
    <com-a></com-a>
    <com-b></com-b>
    <com-c></com-c>
</div>

<script>

    var Event = new Vue()

    var A={
        template:'<div><span>{{data}}</span>' +
        '<input type="button" value="发送a数据" @click="send"></div>'
        ,
        data(){
            return{
                data:'我是A数据'
            }
        },
        methods:{
            send(){
                Event.$emit('msg',this.data)
            }
        }
    };

    var B={
        template:'<div><span>{{data}}</span>' +
        '<input type="button" value="发送b数据" @click="send"></div>'
        ,
        data(){
            return{
                data:'我是B数据'
            }
        },
        methods:{
            send(){
                Event.$emit('msg',this.data)
            }
        }
    };

     var C={
         template:'<div><h3>我是C数据</h3>' +
         '<span>接受过来的数据 -> {{data}}</span></div>'
         ,

         mounted(){
             var _this = this
             Event.$on('msg',function (data) {
                 _this.data= data
             })
         },
         data(){
             return{
                 data:''
             }
         }
     }
    new Vue({
        el:'#app',
        components:{
            'com-a':A,
            'com-b':B,
            'com-c':C
        }
    })
</script>
</body>
</html>